<template>
    <div>
        <!--表格栏   -->
        <el-table
            ref="table"
            v-loading="loading"
            :data="data"
            :highlight-current-row="highlightCurrentRow"
            element-loading-text=" "
            element-loading-custom-class="table-loading-box"
            element-loading-spinner="table-spinner"
            :border="border"
            :stripe="stripe"
            :row-key="rowKey"
            :default-expand-all="defaultExpandAll"
            :max-height="maxHeight"
            :size="size"
            @selection-change="selectionChange"
            @row-click="handleRowClick"
        >
            <el-table-column v-if="ids" type="selection" :reserve-selection="true" width="50" />
            <el-table-column label="No." type="index" v-if="showNo"></el-table-column>

            <template v-for="(item, i) in columns">
                <el-table-column
                    v-if="item.visible || item.visible == null"
                    :key="item.prop"
                    :header-align="item.align"
                    :align="item.align"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width"
                    :min-width="item.minWidth"
                    :fixed="item.fixed"
                    :type="item.type"
                    :formatter="item.formatter"
                    :show-overflow-tooltip="item.showOverflowTooltip"
                >
                    <template slot-scope="scope">
                        <slot v-if="item.slot" :scope="scope" :name="item.slot" :slotIndex="`index${i}.s`" />
                        <span v-if="!item.slot && !item.type">
                            {{
                                typeof scope.row[item.prop] === 'number'
                                    ? scope.row[item.prop]
                                    : scope.row[item.prop] || '-'
                            }}
                        </span>
                        <span v-if="item.type === 'createUser'">
                            {{ scope.row.createUser ? scope.row.createUser : '-' }}
                            <br />
                            {{ scope.row.createTime ? scope.row.createTime : '-' }}
                        </span>
                        <span v-if="item.type === 'updateUser'">
                            {{ scope.row.updateUser ? scope.row.updateUser : '-' }}
                            <br />
                            {{ scope.row.updateTime ? scope.row.updateTime : '-' }}
                        </span>
                        <span v-if="item.type === 'formatTime'">
                            {{ scope.row[item.prop] | formatTime }}
                        </span>
                    </template>
                </el-table-column>
                <slot />
            </template>
        </el-table>
        <!--分页栏-->
        <div
            v-if="isPagination"
            class="toolbar"
            style="padding: 10px; padding-bottom: 25px !important; overflow: hidden"
        >
            <el-pagination
                layout="total, prev, pager, next, jumper"
                :current-page="pageNum"
                :page-size="pageSize"
                :total="total"
                style="float: right"
                @current-change="refreshPageRequest"
            />
        </div>
    </div>
</template>

<script>
/***
 *   @current-change="handleCurrentChange"
 * delIds 是否显示左侧第一行的，批量删除 父级配置则显示，不配置，不显示
 */
import { mapState } from 'vuex'
export default {
    name: 'KtTable',
    components: {},
    computed: {
        ...mapState({
            themeColor: (state) => state.app.themeColor
        })
    },
    model: {
        prop: 'pageNum',
        // event:'pageChange',
        event: 'getPageList'
    },
    props: {
        ids: Array,
        rowKey: {
            type: String,
            default: 'id'
        },
        defaultExpandAll: {
            type: Boolean,
            default: false
        },
        showNo: {
            type: Boolean,
            default: false
        },
        pageNum: {
            type: Number,
            default: 0
        },
        pageSize: {
            type: Number,
            default: 10
        },
        columns: {
            type: Array,
            default: () => {
                return []
            }
        }, // 表格列配置
        total: {
            type: Number,
            default: 0
        },
        data: {
            type: Array,
            default: () => {
                return []
            }
        },
        permsEdit: {
            type: String,
            default: ''
        }, // 编辑权限标识
        permsDelete: {
            type: String,
            default: ''
        }, // 删除权限标识
        size: {
            // 尺寸样式
            type: String,
            default: 'mini'
        },
        align: {
            // 文本对齐方式
            type: String,
            default: 'left'
        },
        maxHeight: {
            // 表格最大高度
            type: Number,
            default: 900
        },
        border: {
            // 是否显示边框
            type: Boolean,
            default: false
        },
        stripe: {
            // 是否显示斑马线
            type: Boolean,
            default: true
        },
        highlightCurrentRow: {
            // 是否高亮当前行
            type: Boolean,
            default: true
        },
        loading: {
            type: Boolean,
            default: false
        },
        // 是否有分页
        isPagination: {
            type: Boolean,
            default: true
        },
        rowData: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            selections: [] // 列表选中列
        }
    },
    watch: {
        data(newValue) {
            this.$nextTick(() => {
                newValue.forEach((row) => {
                    if (this.ids && this.ids.indexOf(row.id) >= 0) {
                        this.$refs.table.toggleRowSelection(row, true)
                    } else {
                        this.$refs.table.toggleRowSelection(row, false)
                    }
                })
            })
        },
        ids(newValue) {
            this.$nextTick(() => {
                this.data.forEach((row) => {
                    if (newValue && newValue.indexOf(row.id) >= 0) {
                        this.$refs.table.toggleRowSelection(row, true)
                    } else {
                        this.$refs.table.toggleRowSelection(row, false)
                    }
                })
            })
        }
    },
    mounted() {
        if (this.ids) {
            this.$nextTick(() => {
                this.data.forEach((row) => {
                    if (this.ids.indexOf(row.id) >= 0) {
                        this.$refs.table.toggleRowSelection(row, true)
                    }
                })
            })
        }
    },
    methods: {
        // 选择切换
        selectionChange: function (selections) {
            this.selections = selections
            let thisIds = this.selections.map((item) => item.id)
            this.$emit('update:ids', thisIds)
            this.$emit('selection-change', selections, thisIds)
        },
        // 选择切换
        // handleCurrentChange: function(val) {
        //     console.log('val===>', val)
        //     this.$emit('handleCurrentChange', { val: val })
        // },
        // @row-click="getAddLisy" 配绑定事件使用，由于操作，先不加点击行选中了
        getAddLisy(val) {
            if (!val.disabled) {
                this.$refs.table.toggleRowSelection(val)
            } else {
                console.log('已添加了')
            }
        },
        // 换页刷新
        refreshPageRequest: function (pageNum) {
            // this.$emit('pageChange', pageNum)
            this.$emit('getPageList', pageNum)
        },
        handleRowClick(row, event, column) {
            console.log('row', row, event, column)
            this.$emit('update:rowData', row)
            // 菜单排序加了一个方法
            this.$nextTick(() => {
                this.$emit('getIsShow')
            })
        }
    }
}
</script>

<style scoped></style>
